<template>
  <Row :gutter="12">
    <Col :span="authorityList.includes('shebaoyuanxingtu') ? 12 : 24" v-if="authorityList.includes('yibaoyuanxingtu')">
      <div class="card-box">
        <div class="card-tit">医保缴费进度</div>
        <div ref="dom" style="width:100%;height: 737px;margin-top: 20px;"></div>
      </div>
    </Col>
    <Col :span="authorityList.includes('yibaoyuanxingtu') ? 12 : 24" v-if="authorityList.includes('shebaoyuanxingtu')">
      <div class="card-box">
        <div class="card-tit">社保缴费进度</div>
        <div ref="dom3" style="width:100%;height: 737px;margin-top: 20px;"></div>
      </div>
    </Col>
  </Row>
</template>

<script>
import {pieStatics} from "./myChart";

export default {
  name: "village",
  props: {
    authorityList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dom: {},
      dom3: {},
    }
  },
  created() {
    if (this.authorityList.includes('shebaoyuanxingtu')) {
      this.shebaoPieStatics();
    }
    if (this.authorityList.includes('yibaoyuanxingtu')) {
      this.yibaoPieStatics();
    }
    this.onResize();
  },
  methods: {
    // 社保饼图统计
    shebaoPieStatics() {
      this.APIS.workhomeSpeedSheBao().then(res => {
        if (res.code == 20000) {
          let unStaffNum = 0;
          if (res.data.totalNum - res.data.payNum > 0) {
            unStaffNum = res.data.totalNum - res.data.payNum;
          }
          var seriesData = [
            {
              value: res.data.payNum,
              name: "已缴费占比",
              label: {
                show: res.data.payNum == 0 ? false : true,
                normal: { color: res.data.payNum / res.data.totalNum * 100 >= 25 ? "#fff" : "#333" },
              },
            },
            {
              value: unStaffNum,
              name: "未缴费占比",
              label: {
                show: unStaffNum == 0 ? false : true,
              },
            },
          ];
          pieStatics('dom3', ["#00CA8E", "#e9f7ff"], seriesData, this);
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    // 医保饼图统计
    yibaoPieStatics() {
      this.APIS.workhomeSpeedYiBao().then(res => {
        if (res.code == 20000) {
          let unStaffNum = 0;
          if (res.data.totalNum - res.data.payNum > 0) {
            unStaffNum = res.data.totalNum - res.data.payNum;
          }
          var seriesData = [
            {
              value: res.data.payNum,
              name: "已缴费占比",
              label: {
                show: res.data.payNum == 0 ? false : true,
                normal: { color: res.data.payNum / res.data.totalNum * 100 >= 25 ? "#fff" : "#333" },
              },
            },
            {
              value: unStaffNum,
              name: "未缴费占比",
              label: {
                show: unStaffNum == 0 ? false : true,
              },
            },
          ];
          pieStatics('dom', ["#1476FD", "#e9f7ff"], seriesData, this);
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    onResize() {
      var self = this;
      window.addEventListener("resize", function () {
        setTimeout(() => {
          if (Object.keys(self.dom).length > 0) {
            self.dom.resize();
          }
          if (Object.keys(self.dom3).length > 0) {
            self.dom3.resize();
          }
        }, 150)
      })
    },
  }
}
</script>

<style scoped lang="less">
@import "../style.less";
</style>
